<style type="text/css">
.credit, .payment{margin:0;color:#666;font-size:14px;line-height:1.5;font-family:Hiragino Sans GB,WenQuanYi Micro Hei,tahoma,sans-serif}
a,button,input,select{padding:0}
a:focus,button:focus,input:focus,select:focus{outline:0}
button,input[type=button],input[type=submit]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
button,input,select,textarea{margin:0;font:inherit;color:inherit}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=submit]{-webkit-appearance:button;cursor:pointer}
input[type=radio]{cursor:pointer}
input[type=radio]:active{outline:none}

.credit {
    height: 62px;
    padding: 0 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 60px;
    border: 2px solid #ddd;
    -webkit-transition: border .1s;
    transition: border .1s;
}
.checkbox-shim {
    float: left;
    display: none;
    cursor: pointer;
    margin-top: 25px;
    _margin-top: 21px;
}
.checkbox {
    float: left;
    cursor: pointer;
    margin-top: 22px;
}
.checkbox-icon {
    width: 16px;
    height: 16px;
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
}
.checkbox-icon:after {
    top: 1px;
    right: 5px;
    content: '';
    width: 5px;
    height: 10px;
    position: absolute;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
    -webkit-transition: .2s cubic-bezier(.18,.89,.32,1.28) .1s;
    transition: .2s cubic-bezier(.18,.89,.32,1.28) .1s;
}
.credit-expanded .checkbox-icon {
    background-color: $_G[setting][dzapp_base_pay_color];
}
.credit-expanded .checkbox-icon:after {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
}
.credit-total {
    float: left;
    cursor: pointer;
    padding-left: 10px;
}
.credit-amount, .credit-price {
    font-size: 20px;
    font-family: arial,sans-serif;
}
.credit-amount {
    margin-left: 10px;
}
.credit-price {
    color: #f76120;
}
.block-left, .block-right {
    width: 50%;
    float: left;
}
.block-right {
    text-align: right;
}
.payment {
    margin-top: 20px;
    position: relative;
}
.payment-menu {
    height: 42px;
    border-bottom: 2px solid;
}
.payment-0 .payment-tab-0, .payment-1 .payment-tab-1, .payment-2 .payment-tab-2 {
    color: #000;
    background: #fff;
    border: 2px solid;
    border-bottom: 0;
}
.payment-tab {
    float: left;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 22px;
    padding: 10px 15px;
    border: 2px solid transparent;
    _border-color: tomato;
    _-webkit-filter: chroma(color=tomato);
    _filter: chroma(color=tomato);
}
.payment-list {
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.payment-list li {
    float: left;
    width: 196px;
    cursor: pointer;
    margin: 0 0 10px;
}
.payment-list input {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.payment-list img{border:0;vertical-align:middle}
.payment-icon {
    cursor: pointer;
    margin-left: 7px;
    display: inline-block;
    border: 1px solid #ddd;
}
.payment-icon img {
    width: 145px;
    height: 32px;
}
.payment-amount {
    font-weight: 700;
    margin-top: 15px;
}
.payment-price {
    color: #f76120;
    font-size: 20px;
    font-family: arial,sans-serif;
}
.payment-submit {
    margin-top: 30px;
}
.payment-submit .pn {
    font-size: 20px;
	color: #fff;
    padding: 5px 20px 4px;
	height: auto;
    background-color: $_G[setting][dzapp_base_pay_color];
    background-image: -webkit-gradient(linear,left top,left bottom,from($_G[setting][dzapp_base_pay_color]),to($_G[setting][dzapp_base_pay_color]));
    background-image: -webkit-linear-gradient(top,$_G[setting][dzapp_base_pay_color],$_G[setting][dzapp_base_pay_color]);
    background-image: linear-gradient(180deg,$_G[setting][dzapp_base_pay_color],$_G[setting][dzapp_base_pay_color]);
    border-bottom: 1px solid #ccc;
}

.payment-amount, .payment-back, .payment-submit {
    text-align: right;
}
.credit-expanded, .credit-expanded .checkbox-icon, .modal-input-password:focus, .modal-input-text:focus, .payment-0 .payment-tab-0, .payment-1 .payment-tab-1, .payment-2 .payment-tab-2, .payment-list li:hover .payment-icon, .payment-menu {
    border-color: $_G[setting][dzapp_base_pay_color];
}
</style>
<!--{if $member[money] > 0}-->
<div class="credit cl" id="credit">
	<div class="block-left" onclick="credit_pay()">
		<input type="checkbox" name="use_money" id="use_money" class="checkbox-shim" value="$money" />
		<div class="checkbox"><span class="checkbox-icon"></span></div>
		<label class="credit-total" for="use_money">{lang dzapp_base:my_money}: <span class="credit-amount"><em>$_G[setting][dzapp_base_currency]</em>$member[money]</span></label>
	</div>
	<div class="block-right" id="credit_price" style="display: none;">{lang dzapp_base:pay}: <span class="credit-price"><em>$_G[setting][dzapp_base_currency]</em>$money</span></div>
</div>
<!--{/if}-->
<div class="payment payment-0">
	<div class="payment-type" id="pay_type">
		<ul class="payment-menu">
			<li class="payment-tab payment-tab-0" id="payment_1" onclick="switchTab('payment', 1, 2, 'payment-tab-0')">{lang dzapp_base:payment_1}</li>
			<!--{if in_array('dzapp_tenpay', $_G[setting][plugins][available])}--><li class="payment-tab payment-tab-1" id="payment_2" onclick="switchTab('payment', 2, 2, 'payment-tab-0')">{lang dzapp_base:payment_2}</li><!--{/if}-->
		</ul>
		<div class="payment-list payment-list-0" id="payment_c_1">
			<ul class="cl">
				<!--{if in_array('dzapp_wxpay', $_G[setting][plugins][available])}--><li><input type="radio" name="bank_type" id="wxpay" value="wxpay" /><label class="payment-icon" for="wxpay"><img src="source/plugin/dzapp_base/static/image/wxpay.png" /></label></li><!--{/if}-->
				<!--{if in_array('dzapp_alipay', $_G[setting][plugins][available])}--><li><input type="radio" name="bank_type" id="alipay" value="alipay" /><label class="payment-icon" for="alipay"><img src="source/plugin/dzapp_base/static/image/alipay.png" /></label></li><!--{/if}-->
				<!--{if in_array('dzapp_tenpay', $_G[setting][plugins][available])}--><li><input type="radio" name="bank_type" id="tenpay" value="tenpay" /><label class="payment-icon" for="tenpay"><img src="source/plugin/dzapp_base/static/image/tenpay.png" /></label></li><!--{/if}-->
				<!--{if in_array('dzapp_paypal', $_G[setting][plugins][available])}--><li><input type="radio" name="bank_type" id="paypal" value="paypal" /><label class="payment-icon" for="paypal"><img src="source/plugin/dzapp_base/static/image/paypal.png" /></label></li><!--{/if}-->
			</ul>
		</div>
		<!--{if in_array('dzapp_tenpay', $_G[setting][plugins][available])}-->
		<div class="payment-list payment-list-1" id="payment_c_2" style="display: none">
			<ul class="cl">
				<li><input type="radio" name="bank_type" id="b2cebank_icbc" value="1002"><label class="payment-icon" for="b2cebank_icbc"><img src="source/plugin/dzapp_base/static/image/bank/icbc.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_cmb" value="1001"><label class="payment-icon" for="b2cebank_cmb"><img src="source/plugin/dzapp_base/static/image/bank/cmb.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_ccb" value="1003"><label class="payment-icon" for="b2cebank_ccb"><img src="source/plugin/dzapp_base/static/image/bank/ccb.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_abc" value="1005"><label class="payment-icon" for="b2cebank_abc"><img src="source/plugin/dzapp_base/static/image/bank/abc.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_boc" value="1020"><label class="payment-icon" for="b2cebank_boc"><img src="source/plugin/dzapp_base/static/image/bank/boc.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_bofc" value="1052"><label class="payment-icon" for="b2cebank_bofc"><img src="source/plugin/dzapp_base/static/image/bank/bofc.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_cib" value="1009"><label class="payment-icon" for="b2cebank_cib"><img src="source/plugin/dzapp_base/static/image/bank/cib.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_cebb" value="1022"><label class="payment-icon" for="b2cebank_cebb"><img src="source/plugin/dzapp_base/static/image/bank/cebb.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_spdb" value="1004"><label class="payment-icon" for="b2cebank_spdb"><img src="source/plugin/dzapp_base/static/image/bank/spdb.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_gdb" value="1027"><label class="payment-icon" for="b2cebank_gdb"><img src="source/plugin/dzapp_base/static/image/bank/gfyh.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_zxyh" value="1021"><label class="payment-icon" for="b2cebank_zxyh"><img src="source/plugin/dzapp_base/static/image/bank/zxyh.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_cmbc" value="1006"><label class="payment-icon" for="b2cebank_cmbc"><img src="source/plugin/dzapp_base/static/image/bank/cmbc.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_pingan" value="1010"><label class="payment-icon" for="b2cebank_pingan"><img src="source/plugin/dzapp_base/static/image/bank/pingan.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_bob" value="1032"><label class="payment-icon" for="b2cebank_bob"><img src="source/plugin/dzapp_base/static/image/bank/bob.png"></label></li>
				<!--li><input type="radio" name="bank_type" id="b2cebank_bjrcb" value=""><label class="payment-icon" for="b2cebank_bjrcb"><img src="source/plugin/dzapp_base/static/image/bank/bjrcb.png"></label></li-->
				<li><input type="radio" name="bank_type" id="b2cebank_pspc" value="1028"><label class="payment-icon" for="b2cebank_pspc"><img src="source/plugin/dzapp_base/static/image/bank/pspc.png"></label></li>
				<li><input type="radio" name="bank_type" id="b2cebank_shrcb" value="1082"><label class="payment-icon" for="b2cebank_shrcb"><img src="source/plugin/dzapp_base/static/image/bank/shrcb.png"></label></li>
				<!--li><input type="radio" name="bank_type" id="b2cebank_hzcb" value=""><label class="payment-icon" for="b2cebank_hzcb"><img src="source/plugin/dzapp_base/static/image/bank/hzcb.png"></label></li-->
			</ul>
			<!--{/if}-->
		</div>
	</div>
	<!--{if $total}-->
	<div class="payment-amount" id="pay_price">{lang dzapp_base:pay}: <span class="payment-price"><em>$_G[setting][dzapp_base_currency]</em><cite id="pay_amount">$total</cite></span></div>
	<!--{/if}-->
	<div class="payment-submit">
		<span id="pay_tip"></span>
		<button type="submit" class="pn pnp"><strong>{lang dzapp_base:to_pay}</strong></button>
	</div>
</div>
<script type="text/javascript">
function credit_pay() {
	if($('use_money').checked) {
		$('use_money').checked = false;
		$('credit').className = 'credit cl';
		$('credit_price').style.display = 'none';
		$('pay_amount').innerHTML = '$total';
		$('pay_type').style.display = 'block';
	} else {
		$('use_money').checked = true;
		$('credit').className = 'credit cl credit-expanded';
		$('credit_price').style.display = 'block';
		$('pay_amount').innerHTML = '$price';
		if($money - $total == 0) {
			$('pay_type').style.display = 'none';
			$('pay_price').style.display = 'none';
		}
	}
}
function succeedhandle_pay(url, msg, values) {
	if(values['pay_type'] == 'wxpay') {
		showWindow('wxpay', 'plugin.php?id=dzapp_wxpay&mod=qrcode&pay_id=' + values['pay_id']);
	} else if(values['pay_type'] == 'paypal') {
		$('append_parent').innerHTML = values['form'];
		document.paypal.submit();
	} else {
		location.href = values['href'];
	}
}
</script>